import React, { useEffect, useState } from 'react';
// 引入 antd 组件
import {
  NavBar,
  Input,
  ImageUploader,
  Button,
  TextArea,
  Toast,
} from 'antd-mobile';
import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader';
// 引入样式
import './feedback.less';
import { PictureOutline } from 'antd-mobile-icons';
// 睡眠
import { sleep } from 'antd-mobile/es/utils/sleep';

import { history } from 'umi';
import axios from 'axios';

export default function feedback() {
  const [fileList, setFileList] = useState<ImageUploadItem[]>([]);
  const [feedback, setFeedback] = useState('');
  const [phone, setPhone] = useState('');

  const mockUpload = async (file: File) => {
    console.log(URL.createObjectURL(file));

    await sleep(1000);
    return {
      url: URL.createObjectURL(file),
    };
  };

  const back = () => {
    history.go(-1);
  };

  // 提交反馈信息
  const tijiao = async () => {
    if (feedback) {
      let {
        data: { code, msg },
      } = await axios.post('/api/feedback/feedback', {
        title: feedback,
        imgAry: fileList,
        phone: phone,
      });
      if (code === 200) {
        history.go(-1);
        Toast.show({
          content: '意见反馈成功',
        });
      }
    } else {
      Toast.show({
        content: '反馈信息不能为空哦！',
      });
    }
  };
  return (
    <div className="feedback">
      {/* 顶部设置 */}
      <div className="feedback-top">
        <NavBar onBack={back}>意见反馈</NavBar>
      </div>
      {/* 反馈文字和照片 */}
      <div className="feedback-body">
        <h3>反馈描述</h3>
        <TextArea
          placeholder="说说你的建议或问题，以便我们可以为你提供更好的服务。"
          showCount
          maxLength={2000}
          value={feedback}
          onChange={(value) => setFeedback(value)}
        />

        <h3>上传图片，事情说的更明白</h3>
        <ImageUploader
          columns={5}
          value={fileList}
          onChange={(val) => setFileList(val)}
          upload={mockUpload}
        >
          <div
            style={{
              width: 60,
              height: 60,
              borderRadius: 40,
              backgroundColor: '#f5f5f5',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              color: '#999999',
            }}
          >
            <PictureOutline style={{ fontSize: 32 }} />
          </div>
        </ImageUploader>
      </div>
      <div className="feedback-body">
        <h3>联系方式</h3>
        <Input
          placeholder="请输入您的手机号（选填）"
          clearable
          value={phone}
          maxLength={11}
          onChange={(val) => {
            setPhone(val);
          }}
        />
      </div>
      <Button
        className="tijiao"
        onClick={tijiao}
        block
        color="primary"
        size="large"
      >
        提交反馈
      </Button>
    </div>
  );
}
